<!--
 * @Author: 吴竹叶 2107206923@qq.com
 * @Date: 2023-09-26 09:49:34
 * @LastEditors: 吴竹叶 2107206923@qq.com
 * @LastEditTime: 2023-09-27 15:20:37
 * @FilePath: \BZ_JT_AnQuanHuanBaoGuanLiApp\src\views\accident\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="accident-warp common-details">
      <div class="index-top" style="height: auto;">
        <div style="width: 100%; " class="pt-1 px-1">
          <customSearch
            ref="customSearch"
            style="margin-bottom: 0;"
            :is-super-search="false"
            placeholder="请输入事件名称"
            title="事故快报"
            :total="total"
            @search="handleSearch"
            @superSearch="openSuperSearch"
          />
        </div>
        <van-popup v-model="show" position="bottom" @open="showPicker = true" @closed="showPicker = false">
          <van-picker
            v-if="showPicker"
            show-toolbar
            :columns="columns"
            :default-index="defaultIndex"
            value-key="eventName"
            @confirm="onConfirm"
            @cancel="onCancel"
          />
        </van-popup>
        <div class="inputBox" style="height: 40px;">
          <template v-if="columns.length>0">
            <div @click="show = true">{{ currentType.eventName }}</div>
            <i class="iconfont down">&#xe656;</i>
          </template>
          <template v-else>暂无数据</template>
        </div>
      </div>
      <div class="d-scroll">
        <div class="common_list mx-1" style="width: auto">
          <customTitle :is-line="true" bg-color="#3795ff" title="基本信息" />
          <div class="base-info-accident">
            <template v-if="columns.length>0">
              <custom-details-item
                v-for="item in descList"
                :key="item.field"
                :label="item.label"
                :value="descData[item.field] !== ''&&descData[item.field]!==undefined?descData[item.field]:'/'"
              />
            </template>
            <el-empty v-else />
          </div>
          <customTitle :is-line="true" bg-color="#3795ff" title="进度追踪" />
          <div class="accident-timeline">
            <custom-timeline :list="timeList" />
          </div>
        </div>
      </div>

      <van-popup
        v-model="superSearch"
        position="right"
        :style="{ width: '90%', height: '100%' }"
        lock-scroll
        close-on-popstate
        closeable
        class="custom-van-pop"
      >
        <div class="pop-vertical-flex">
          <div class="pop-content">
            <!--              <div class="customPopCheckbox">-->
            <!--                <div class="checkbox-title">事故名称</div>-->
            <!--                <el-input v-model="form.name" placeholder="请输入事故名称" size="small" style="margin-bottom: 10px" />-->
            <!--              </div>-->
            <customPopCheckbox :list="selectOptionAll['事故类别']" :check-value.sync="form.eventType" title="事故类别" />
            <customPopCheckbox
              :list="selectOptionAll['事故等级']"
              :check-value.sync="form.eventLevel"
              title="事故等级"
            />
          </div>
          <div class="pop-bottom">
            <van-button type="default" @click="resetSuperSearch">重置</van-button>
            <van-button type="info" @click="handleSuperSearch">确认</van-button>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import customTimeline from '@/components/common/custom-timeline.vue'
import customPopCheckbox from '@/components/common/custom-pop-checkbox.vue'
import GetSelect from '@/assets/mixin/getSelect'
import { eventReportInfo, eventReportInfoDetail } from '@/api/accident'
import customSearch from '@/components/common/custom-search.vue'
import commonList from '@/assets/mixin/commonList'
import CustomTitle from '@/components/globals/custom-title.vue'
import CustomDetailsItem from '@/components/globals/custom-details-item.vue'

export default {
  components: {
    CustomDetailsItem,
    CustomTitle,
    customSearch,
    customPopCheckbox,
    customTimeline
  },
  inject: ['layout'],
  mixins: [GetSelect, commonList],
  data() {
    return {
      show: false,
      filter: false,
      form: {
        eventName: '',
        eventType: '',
        eventLevel: ''
      },
      currentType: '',
      columns: [],
      options: [],
      timeList: [],
      descList: [
        { label: '企业名称', field: 'companyName' },
        { label: '事故名称', field: 'eventName' },
        { label: '事故发生时间', field: 'eventTime' },
        { label: '事故发生地点', field: 'eventPlace' },
        { label: '事故类别', field: 'eventType' },
        { label: '事故描述', field: 'eventDescribe' },
        { label: '伤亡描述', field: 'injureDescribe' }
      ],
      descData: {},
      defaultIndex: 0,
      showPicker: true
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    handleSearch(value) {
      this.form.eventName = value
      this.init()
    },
    openSuperSearch() {
      this.superSearch = true
    },
    async init() {
      this.layout.showAreaLoading(['.base-info-accident'])
      this.layout.showAreaLoading(['.accident-timeline'])
      const { data, status } = await eventReportInfo(this.form)
      if (data && status === 0) {
        this.options = data
        this.columns = data.map(val => val)
        console.log('columns', this.columns)
        this.currentType = this.columns[0] ? this.columns[0] : {}
        this.descData = this.columns[0] ? this.columns[0] : {}
        this.defaultIndex = 0
        this.getDetail()
      }
      this.layout.hideAreaLoading(['.base-info-accident'])
    },
    async getDetail() {
      if (this.currentType && this.currentType.eventId) {
        const eventId = this.currentType.eventId
        const { data, status } = await eventReportInfoDetail({ eventId })
        if (data && status === 0) {
          this.timeList = data.map(val => ({
            name_: val.reportTime,
            msg: val.workContent,
            activeNames: ['1'],
            end_time_: val.chargeUser,
            files: val.shareAttachVos
          }))
        }
      } else {
        this.timeList = []
      }
      this.layout.hideAreaLoading(['.accident-timeline'])
    },
    onConfirm(value, index) {
      this.currentType = value
      this.show = false
      this.descData = value
      this.layout.showAreaLoading(['.accident-timeline'])
      this.defaultIndex = index
      this.getDetail()
    },
    onCancel() {
      this.show = false
    },
    resetSuperSearch() {
      Object.keys(this.form).forEach(v => {
        this.form[v] = ''
      })
    },
    handleSuperSearch() {
      this.filter = false
    }
  }
}
</script>

<style lang="scss" scoped>
.accident-warp {
  height: 100%;
  //background-color: #fff;
  .index-top {
    height: 90px;
    flex: 0 0 90px;
    margin-bottom: 0;
    background: #3f81ff;
    position: relative;
    flex-wrap: wrap;

    .inputBox {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;

      .iconfont {
        font-size: 32px;
        margin-left: 10px;
      }

      .filter {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 44px;
      }
    }
  }

  .info {
    padding: 0.533rem;
    height: calc(100% - 90px);
    overflow-y: auto;
    background-color: white;
  }
}

::v-deep .search-left {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
</style>
